<template>
	<view>
		<page-bg-liner></page-bg-liner>
		<view class=" container" >
			<view class="top-box" :class="{'top-bg-x':topBgShow}" :style="{paddingTop:(statusBarHeight + 10)+'px'}">
				<view class="search width100 flex align-center">
					<view class="flex align-center m-r-10" v-if="logoData.logo">
						<image :src="logoData.logo" class="logo"></image>
					</view>
					<view class="search_con width100 flex align-center">
						<image src="/static/img/search-white.png"
							style="margin-right: 20rpx;min-width: 31rpx;height: 34rpx;width: 31rpx;"></image>
						<input placeholder-style="color:#fff" class="uni-input flex-1" confirm-type="search" v-model="search"
							placeholder="请输入公司名称" />
					</view>
					<view class="text" @click="searchKeyword">搜索</view>
				</view>
				<view class="scroll-menu">
					<scroll-view  scroll-x="true" class="scroll-X" style="white-space: nowrap;"
						@scroll="scroll">
						<view @click="titleChange(index)" class="scroll-view-item "
							:class="titleIndex === index ?'scroll-view-item_active':''" v-for="(item,index) in menuList">
							{{item.name}}</view>
					</scroll-view>
				</view>
				<view class="card_tips">
					<scroll-view  scroll-x="true" class="scroll-X" style="white-space: nowrap;" >
						<view @click="tipsChange(index)" class="name "
							:class="activeIndex === index ?'activeName':''" v-for="(item,index) in tipsList">
							{{item.name}}</view>
					</scroll-view>
					<!-- <view @click="tipsChange(index)" v-for="(item,index) in tipsList" class="name"
						:class="activeIndex === index ? 'activeName':''">{{item.name}}</view> -->
				</view>
			</view>
			<view style="height: 275rpx;"></view>
			<view class="add_icon" @click="addHandle">
				<image style="width: 101rpx;height: 101rpx;" src="/static/img/add-xl.png"></image>
			</view>
			
			<view class="pb50">
				<view class="card_con" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
					<view class="item flex align-start">
						<view class="name" style="min-width: 140rpx;">企业名称：</view>
						<view class="con">{{item.company}}</view>
					</view>
					<view class="item  flex align-start">
						<view class="name" style="min-width: 65rpx;">地址：</view>
						<view class="con">{{item.address}}</view>
					</view>
					<view class="item width100 flex">
						<view class="li width50  flex align-start">
							<view class="name" style="min-width: 110rpx;">联系人：</view>
							<view class="con">{{item.name}} <text v-if="item.position">({{item.position}})</text></view>
						</view>
						<view class="li width50  flex align-start justify-start" @click.stop="callPhone(item)">
							<view class="name flex-none" >联系方式：</view>
							<view class="flex align-center">
								<view class="con">{{item.phone}}</view>
								<image src="/static/img/phone.png" class="phone" mode=""></image>
							</view>
							
						</view>
					</view>
					<view class="item width100 flex">
						<view class="li width50  flex align-center">
							<view class="name" style="min-width: 140rpx;">拜访次数：</view>
							<view class="con">{{item.visit_count||0}}次</view>
						</view>
						<view class="li width50  flex align-center">
							<view class="name" >产品：</view>
							<view class="flex flex-wrap">
								<view class="con icon m-t-1 m-b-1 m-r-2" v-for="item2 in item.product_category_arr">{{item2.name}}</view>
							</view>
							<view class="" v-if="item.product_category_arr&&item.product_category_arr.length==0">
								暂无
							</view>
						</view>
					</view>
					<view class="item  flex align-start">
						<view class="name" style="min-width: 200rpx;">下次拜访时间：</view>
						<view class="con">{{item.timeStr}}</view>
					</view>
				</view>
			
			</view>
		</view>
		<view class="nodata" v-if="list.length == 0">
			暂无数据
		</view>
		<uni-popup ref="popup" type="center" :animation="false">
			<view class="popup_content">
				<view class="popup_content_title">添加公司</view>
				<view class="content_item flex align-center ">
					<view class="name">客户行业</view>
					<view class="con_ width100">
						<uni-data-select placeholder="请选择" placeholder-style="color:#DEDEDE;font-size:28rpx"
							v-model="dataForm.industry_id" :localdata="range" @change="change"></uni-data-select>
					</view>
				</view>
				<view class="content_item flex align-center ">
					<view class="name">客户类型</view>
					<view class="con_ width100">
						<uni-data-select placeholder="请选择" placeholder-style="color:#DEDEDE;font-size:28rpx"
							v-model="dataForm.type_id" :localdata="range2" @change="change2"></uni-data-select>
					</view>
				</view>
				<view class="content_item flex align-center ">
					<view class="name">客户名称</view>
					<view class="con_ width100">
						<input v-model="dataForm.company" placeholder="请输入公司名称"
							placeholder-style="color:#DEDEDE;font-size:28rpx" />
					</view>
				</view>
				<view class="content_item flex align-center relative" @click="addressHandle">
					<view class="name">客户地址</view>
					<view class="con_ width100">
						<input v-model="dataForm.address" placeholder="请选择公司地址" disabled
							placeholder-style="color:#DEDEDE;font-size:28rpx" style="pointer-events: none;"/>
					</view>
					<image  src="/static/img/local.png"
						style="position: absolute;width: 40rpx;height: 46rpx;right: 10rpx;"></image>
				</view>
				<view class="content_item flex align-center ">
					<view class="name">拜访人</view>
					<view class="con_ width100">
						<input v-model="dataForm.name" placeholder="请输入拜访人名字"
							placeholder-style="color:#DEDEDE;font-size:28rpx" />
					</view>
				</view>
				<view class="content_item flex align-center ">
					<view class="name">职位</view>
					<view class="con_ width100">
						<input v-model="dataForm.position" placeholder="请输入拜访人职位"
							placeholder-style="color:#DEDEDE;font-size:28rpx" />
					</view>
				</view>
				<view class="content_item flex align-center ">
					<view class="name">联系电话</view>
					<view class="con_ width100">
						<input v-model="dataForm.phone" placeholder="请输入拜访人电话"
							placeholder-style="color:#DEDEDE;font-size:28rpx" />
					</view>
				</view>
				<div class="footer flex justify-center">
					<view @click="addClose" class="btn">取消</view>
					<view class="btn sure" @click="addSub">确认</view>
				</div>
				<view @click="addClose" class="close_icon">
					<image style="width: 65rpx;height: 65rpx;" src="/static/img/close-white.png"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleIndex: 0,
				activeIndex: 0,
				dataForm: {
					company: '',
					address: '',
					industry_id: '',
					type_id: '',
					name: '',
					position: '',
					phone: '',
					tag: '',
					longitude: '',
					latitude: ''
				},
				range: [
					// {
					// 	value: 0,
					// 	text: "篮球"
					// }
				],
				range2:[],
				menuList: [],
				menuListBei:[],
				tipsList: [],
				tipsListBei: [],
				list:[],
				statusBarHeight: 20,
				windowWidth: 0,
				windowHeight: 0,
				value: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				page:1,
				lastPage:1,
				search:'',
				logoData:{},
				topBgShow:false,
			}
		},
		onLoad() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight;
				}
			});
			let logoData = uni.getStorageSync('logoData');
			if(logoData){
				this.logoData = logoData;
			}
			this.getList();
		},
		onPageScroll(e) {
			if (e.scrollTop > 10) {
				this.topBgShow = true;
			} else {
				this.topBgShow = false;
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getList();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		onReachBottom() {
			if(this.page>=this.lastPage)return;
			this.page++;
			this.getListDo();
		},
		methods: {
			addressHandle() {
				uni.chooseLocation({
					success:  (res)=> {
						console.log( res);
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						this.dataForm.address = res.address;
						this.dataForm.latitude = res.latitude;
						this.dataForm.longitude = res.longitude;
					}
				});
			},
			addHandle() {
				this.$refs.popup.open();
				
			},
			addClose() {
				this.$refs.popup.close()
			},
			change(e) {
				console.log("e:", e);
				let range2 = [];
				this.dataForm.type_id = '';
				this.menuListBei.forEach(item=>{
					if(item.id == e){
						item.type_arr.forEach(item2=>{
							range2.push({
								value:item2.id,
								text:item2.name
							})
						})
					}
				})
				this.range2 = range2;
			},
			change2(e) {
				console.log("e:", e);
			},
			addSub(){
				let data = this.dataForm;
				this.$http('/api/saveClient', data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(()=>{
							this.dataForm = {
								company: '',
								address: '',
								industry_id: '',
								type_id: '',
								name: '',
								position: '',
								phone: '',
								tag: '',
								longitude: '',
								latitude: ''
							}
							this.page = 1;
							this.getListDo();
							this.addClose();
						},1000)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			scroll: function(e) {
				// console.log(e)
				// this.old.scrollTop = e.detail.scrollTop
			},
			tipsChange(index) {
				this.activeIndex = index;
				this.page = 1;
				this.getListDo();
			},
			titleChange(index) {
				this.titleIndex = index;
				this.activeIndex = 0;
				this.page = 1;
				this.tipsList = [];
				this.getSub();
				this.getListDo();
			},
			searchKeyword(){
				this.page = 1;
				this.getListDo();
			},
			getList(){
				let data = {
					
				};
				this.$http('/api/clientList', data,'get').then(res => {
					if (res.code == 200) {
						let datas = res.data;
						let range = [],range2 = [];
						this.menuListBei = datas.industry?JSON.parse(JSON.stringify(datas.industry)):[];
						this.tipsListBei = datas.type?JSON.parse(JSON.stringify(datas.type)):[];
						
						datas.industry.forEach(item=>{
							range.push({
								value:item.id,
								text:item.name
							})
						})
						// datas.type.forEach(item=>{
						// 	range2.push({
						// 		value:item.id,
						// 		text:item.name
						// 	})
						// })
						this.range = range;
						// this.range2 = range2;
						let arr = [{id:'',name:'全部'}],arr2 = [{id:'',name:'全部'}];
						arr = arr.concat(datas.industry);
						arr2 = arr2.concat(datas.type);
						this.menuList = arr;
						this.tipsList = arr2;
						this.getListDo();
					}
				})
			},
			getSub(){
				let list = [];
				if(this.titleIndex==0){
					list = this.tipsListBei;
				}else{
					this.menuListBei.forEach(item=>{
						if(item.id == this.menuList[this.titleIndex].id){
							list = item.type_arr;
						}
					})
				}
				let arr2 = [{id:'',name:'全部'}];
				arr2 = arr2.concat(list);
				this.tipsList = arr2;
			},
			getListDo(){
				let data = {
					keyword:this.search,
					page:this.page,
					industry_id:this.menuList[this.titleIndex]?this.menuList[this.titleIndex].id:'',
					type_id:this.tipsList[this.activeIndex]?this.tipsList[this.activeIndex].id:''
				};
				this.$http('/api/clientList', data,'get').then(res => {
					if (res.code == 200) {
						let datas = res.data;
						let list = datas.items;
						list.forEach(item=>{
							if(item.next_visits_time&&item.next_visits_time.start_at){
								let obj = item.next_visits_time;
								item.timeStr = `${obj.start_at.slice(0,-3)}`;
							}
						})
						if(this.page == 1){
							this.lastPage = datas.pageInfo.totalPage;
							this.list = list;
						}else{
							this.list = this.list.concat(list);
						}
					}
				})
			},
			toDetail(item){
				uni.navigateTo({
					url:'/pages/system/customerDetail?id='+item.id
				})
			},
			callPhone(item){
				window.location.href = 'tel:'+item.phone;
			},
		}
	}
</script>

<style lang="less" scoped>
	.pb50{
		padding-bottom: 100rpx;
	}
	.top-box{
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		width: 100%;
		padding-bottom: 10rpx;
		z-index: 10;
	}
	.top-bg-x{
		background: #c8e6f8;
	}
	.popup_content {
		width: 95%;
		min-width: 660rpx;
		min-height: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 28rpx;
		position: relative;

		.close_icon {
			position: absolute;
			bottom: -110rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.footer {
			padding-top: 50rpx;
			padding-bottom: 60rpx;

			.btn {
				width: 170rpx;
				height: 71rpx;
				text-align: center;
				line-height: 70rpx;
				color: #666;
				background-color: #DEDEDE;
				border: 1px solid #DEDEDE;
				margin-right: 50rpx;
				margin-left: 50rpx;
				border-radius: 20rpx;
				font-size: 30rpx;
			}

			.sure {
				color: #fff;
				background-color: #4072F4;
				border-color: #4072F4;
			}
		}

		.uni-select {
			border: none !important;
		}

		&_title {
			line-height: 3;
			font-size: 32rpx;
			text-align: center;
			padding-top: 20rpx;
		}

		.content_item {
			padding: 20rpx 50rpx 20rpx 30rpx;
			margin: 0 30rpx;
			box-sizing: border-box;

			.name {
				min-width: 130rpx;
				padding-bottom: 20rpx;
			}

			.con_ {
				padding-bottom: 20rpx;
				border-bottom: 1px solid #DEDEDE;
			}
		}
	}

	.add_icon {
		position: fixed;
		bottom: 10%;
		right: 30rpx;
		z-index: 10;
	}

	.scroll-menu {
		width: 100%;
		padding-left: 30rpx;
		font-size: 30rpx;
		padding-top: 30rpx;

		.scroll-X {
			width: 100%;

			.scroll-view-item {
				margin-right: 30rpx;
				display: inline-block;
				width: auto;
				overflow: visible;
				padding-bottom: 10rpx;

			}

			.scroll-view-item_active {
				color: #4072F4;
				text-align: center;
				overflow: visible;
				position: relative;

				&::after {
					width: 80%;
					display: block;
					content: "";
					height: 2px;
					position: absolute;
					left: 50%;
					bottom: 0rpx;
					transform: translateX(-50%);
					background-color: #4072F4;

				}
			}
		}
	}

	.container {
		box-sizing: border-box;
		.card_con {
			background-color: #fff;
			margin-bottom: 20rpx;
			padding: 30rpx;
			font-size: 28rpx;
			box-shadow: 0px 3px 3px 0px #cccddd;
			.item {
				margin-bottom: 20rpx;

				.name {
					color: #999;
				}

				.con {
					color: #333;
				}

				.icon {
					border-radius: 10rpx;
					padding: 0 15rpx;
					color: #4072F4;
					border: 1px solid #4072F4;
				}
			}
		}

		.card_tips {
			padding-top: 20rpx;
			padding-left: 30rpx;
			padding-bottom: 20rpx;
			.name {
				display: inline-block;
				margin-right: 20rpx;
				word-break: break-all;
				padding: 10rpx 15rpx;
				font-size: 28rpx;
				color: #333333;
				background: rgba(206, 212, 221, 0.45);
				border-radius: 10px;
			}

			.activeName {
				color: #4072F4;
				background: rgba(64, 114, 244, 0.14);
				border-radius: 10px;
				border: 1px solid rgba(64, 114, 244, 0.34)
			}
		}

		.search {
			padding: 0 32rpx;
			box-sizing: border-box;
			font-size: 28rpx;

			.text {
				min-width: 100rpx;
				text-align: right;
			}

			.search_con {
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				border: 1px solid #A6D6FF;
				border-radius: 50rpx;
				background-color: rgba(255, 255, 255, 0.14);
				font-size: 28rpx;

				input {
					font-size: 28rpx;

					&::placeholder {
						color: #fff;
					}
				}
			}
		}
	}
	.logo{
		width: 62rpx;
		height: 62rpx;
		border-radius: 50%;
	}
	.phone{
		width: 30rpx;
		height: 30rpx;
	}
</style>